graph TD
    subgraph "用户端 (Clients)"
        U_Admin["👨‍💻 管理员"]
        U_Teacher["👩‍🏫 教师"]
        U_Student["🎓 学生"]
    end

    subgraph "前端应用 (Vue.js)"
        direction LR
        Front_Admin("后台管理界面 <br> /Src/vue/admin")
        Front_Student("前台学习界面 <br> /Src/vue/front")
    end

    subgraph "后端服务 (Backend Services)"
        direction LR
        subgraph "AI 服务 (Python/FastAPI)"
            direction TB
            AI_API["🤖 FastAPI 接口 <br> main.py"] --> AI_RAG("🧠 RAG 核心 <br> rag_core.py")
            AI_RAG -->|检索| Chroma_DB["📚 VectorDB <br> Chroma"]
            AI_RAG -->|生成| Gemini_API{"☁️ Google Gemini API"}
        end
        
        SpringBoot_App["🍃 主业务服务 <br> Spring Boot"]

        subgraph "数据存储 (Data Persistence)"
            MySQL_DB["🗄️ MySQL数据库 <br> springbootn3op2l20.sql"]
            Chroma_DB
        end
    end

    Gateway["🌐 Spring Cloud Gateway <br> /Code/gateway"]

    %% 定义连接关系
    U_Admin --> Front_Admin
    U_Teacher --> Front_Student
    U_Student --> Front_Student

    Front_Admin -- "HTTP API请求" --> Gateway
    Front_Student -- "HTTP API请求" --> Gateway

    Gateway -- "路由转发" --> SpringBoot_App
    Gateway -- "路由转发" --> AI_API

    SpringBoot_App -- "读写数据" --> MySQL_DB
    
    AI_API -- "加载课程资料" --> MySQL_DB

    %% 定义样式
    classDef user fill:#D4E6F1,stroke:#5DADE2,stroke-width:2px
    classDef frontend fill:#D5F5E3,stroke:#58D68D,stroke-width:2px
    classDef backend fill:#FCF3CF,stroke:#F4D03F,stroke-width:2px
    classDef gateway fill:#EBDEF0,stroke:#C39BD3,stroke-width:2px
    classDef database fill:#FDEDEC,stroke:#F1948A,stroke-width:2px
    classDef external fill:#E5E7E9,stroke:#839192,stroke-width:2px

    class U_Admin,U_Teacher,U_Student user
    class Front_Admin,Front_Student frontend
    class SpringBoot_App,AI_API,AI_RAG backend
    class Gateway gateway
    class MySQL_DB,Chroma_DB database
    class Gemini_API external